古人云：知己知彼，百戰不殆，為了程世社季子，我必須把 VueUse 研究個底朝天，看看它到底多厲害能被這麼多人崇拜！
#挽回愛情的第二天

在使用 Vue.js 開發的時候，經常需要處理各種複雜的邏輯，狀態、監控變化或是與瀏覽器 API 互動。這些工作雖然可以手動完成，但有時會增加開發的複雜度和重複的工作量。為了減少這些負擔，我們可以使用 VueUse，它是一個專門為 Vue 3 開發的實用工具庫。

VueUse 是什麼？

VueUse 是一個基於 Vue Composition API 的工具庫，裡面提供了許多即時可用的可組合工具函數 (composable utilities)。這些函數可以幫助開發者更方便地處理常見的應用場景，例如：狀態管理、瀏覽器事件處理、時間操作、DOM 操作等。這些工具函數不僅能節省開發時間，還能讓程式碼變得更簡潔和易於維護。

VueUse 的主要特色

1. 即時可用的 Composable 函數：VueUse 提供了數百個實用函數，可以直接拿來使用。例如，想監聽螢幕大小變化（useWindowSize）或處理本地儲存（useStorage），只需要引入相關函數，調用即可。
2. 與 Vue 3 完美整合：VueUse 的設計完全遵循 Vue 3 的 Composition API，因此可以很自然地將其與其他 Vue 3 特性一同使用。
3. 輕量、靈活：VueUse 提供了許多工具函數，而且只需引入需要的部分，不會增加不必要的負擔。
4. 瀏覽器 API 的包裝：許多瀏覽器 API（如 LocalStorage、Mouse Events 等）在 VueUse 中都已經有了簡單易用的封裝，減少了直接與原生 API 打交道的麻煩。

VueUse 可以做什麼？

這裡列舉幾個 VueUse 可以解決的常見情境：

1. 狀態管理：用 useToggle 可以輕鬆地在 true/false 之間切換狀態：

   import { useToggle } from '@vueuse/core'
   const [isOpen, toggle] = useToggle(false)
   
   

2. 監聽螢幕尺寸變化：使用 useWindowSize 可以輕鬆獲取螢幕的寬高，並隨著變化自動更新：

   import { useWindowSize } from '@vueuse/core'
   const { width, height } = useWindowSize()
   
   

3. 處理 LocalStorage：使用 useLocalStorage 可以輕鬆存取 LocalStorage，並且具有響應式特性：

   import { useLocalStorage } from '@vueuse/core'
   const name = useLocalStorage('name', 'default value')
   
   

4. 時間操作：用 useNow 可以得到實時的時間，並且時間會自動更新：

   import { useNow } from '@vueuse/core'
   const now = useNow()
   
   

5. 鼠標事件監聽：useMouse 可以簡單取得鼠標的即時位置：

   import { useMouse } from '@vueuse/core'
   const { x, y } = useMouse()
   
   

如何開始使用 VueUse？

VueUse 非常容易上手，以下是基本的安裝與使用步驟：

1. 安裝 VueUse

首先，使用 npm 或 yarn 安裝 VueUse：

npm install @vueuse/core

或是

yarn add @vueuse/core

2. 在組件中使用 VueUse 函數

一旦安裝完成後，可以在 Vue 組件中導入並使用 VueUse 提供的各種工具函數。例如，這裡是一個使用 useMouse 函數的小範例：

<template>
  <div>
    滑鼠位置: ({{ x }}, {{ y }})
  </div>
</template>

<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>

結語

VueUse 是一個強大且靈活的工具庫，特別適合希望提高開發效率的開發者。不論是初學者還是有經驗的開發者，VueUse 都能幫助簡化應用中的許多常見操作，讓開發者可以專注於實現核心功能，而不必為常見的邏輯問題煩惱。

如果剛開始學習 Vue 3，建議可以花一些時間了解並使用 VueUse，這將大大的提升開發效率，並讓程式碼更加簡潔與可維護。

補充

也可以用 VueUse 提供的 playground 來玩玩看，筆者在後續的文章也都會該環境做測試與說明
VueUse useMouse Playground